<template>
  <div class="template">
    <div id="dplayer"></div>
    <button @click="listAdd">上传文件</button>
    <el-row class="banner">
      <transition name="el-fade-in-linear">
        <el-col :span="24" v-show="bannerShow" class="banner-img">
          <img src="/@/assets/banner/MusicBanner.jpg" />
        </el-col>
      </transition>
    </el-row>
    <el-row type="flex" justify="space-around" style="margin: 8rem 0 2rem 0">
      <el-col :span="10" class="content">
        <el-row class="list-title">
          <el-col :span="12">视频</el-col>
          <el-col :span="8">时长</el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <el-row
          v-for="(video, index) in videoList"
          :key="video.id"
          class="song-list"
        >
          <el-col :span="12">{{ video.filename }}</el-col>
          <el-col :span="8">{{ video.dt }}</el-col>
          <el-col :span="4" class="play-btn">
            <el-row class="play-icon">
              <el-col :span="12">
                <i class="el-icon-video-play" @click="playVideo(index)"></i>
              </el-col>
              <el-col :span="12">
                <i
                  class="el-icon-circle-plus-outline"
                  @click="listAdd(video)"
                ></i>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="13" class="content song-content">
        <el-row>
          <el-col class="content-name">视频</el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import DPlayer from "dplayer";
import OpenDialog from "../api/OpenDialog";
import * as types from "../store/mutation-types";

export default {
  name: "articleContent",
  setup() {
    return {
      bannerShow: false,
      lyric: [],
      currentRow: 0,
      lyricMove: {
        top: "6rem",
      },
    };
  },
  methods: {
    // 初始化dplayer播放器
    initDplayer() {
      this.dp = new DPlayer({
        container: document.getElementById("dplayer"),
        theme: "#FADFA3",
        screenshot: true,
        preload: "none",
        video: {
          url:
            "https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4",
        },
      });
    },
    switchVideo() {
      const url = this.inputValidator(newVal.src)
        ? newVal.src
        : `http://localhost:6789/video/${encodeURIComponent(newVal.src)}`;
    },
    // 校验url
    inputValidator(e) {
      // 校验url
      let reg1 = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
      let flag1 = reg1.test(e);
      return flag1;
    },
    listAdd() {
      this.dialog.openFile();
    },
    //播放视频
    playVideo(index) {
      this.$store.commit(types.SET_CURRENT_VIDEO_INDEX, index);
    },
  },
  computed: {
    ...mapGetters(["videoList", "currentVideoIndex"]),
  },
  watch: {
    currentVideoIndex(newVal, oldVal) {
      console.log("watch currentVideoIndex: %d", newVal);
      if (newVal > -1 && newVal < this.videoList.length) {
        const video = this.videoList[newVal];
        const url = this.inputValidator(video.src)
          ? video.src
          : `http://127.0.0.1:9001/video/${encodeURIComponent(
              video.src
            )}`;
        console.log("url: %s", url)
        this.dp.switchVideo({
          url,
        });
        this.dp.play()
      }
    },
  },
  created() {
    this.bannerShow = true;
    window.scrollTo(0, 0);
    // this.getSong(this.$route.query.name); //加载歌曲列表
  },
  mounted() {
    this.initDplayer();
    this.dialog = new OpenDialog();
  },
  beforeUnmount() {
    this.dp.destroy();
  },
};
</script>

<style scoped>
#dplayer {
  width: 80%;
  margin: 0 auto;
}

.template {
  width: 100%;
  background: #f2f2f2;
}
.banner {
  height: 100%;
  overflow: hidden;
  position: fixed;
  /* top: 0;
  left: 0; */
  filter: blur(5px);
}
.banner-img {
  transition: 0.5s;
}
.banner-img img {
  width: 100% !important;
}

.content {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 1rem;
  min-height: 20rem;
}
.list-title {
  margin: 1rem;
  border-bottom: 1px solid slategray;
  padding-bottom: 0.5rem;
}
.song-list {
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  margin: 1rem;
  border-bottom: 1px solid slategray;
}
.play-icon {
  font-size: 1.2rem;
}
.play-icon i:hover {
  color: #409eff;
}
.el-pagination >>> button,
.el-pagination >>> li {
  background: none;
}
.song-content {
  max-height: 35rem;
}

.content-name {
  font-family: "KaiTi";
  padding: 2rem 0 1rem 0;
  font-size: 2rem;
}
.lyric-contain {
  position: relative;
  height: 20rem;
  margin-top: 3rem;
  overflow: hidden;
}
.song-lyric {
  /* css保留空格和换行符*/
  white-space: pre-wrap;
  /* css保留换行符*/
  white-space: pre-line;
  position: absolute;
  transition: 1s;
}
.lyric-row {
  height: 2.5rem;
}
</style>